{% extends "base.html" %}

{% block subtitle %}
  Contribute
{% endblock subtitle %}

{% block content %}

  <div class="container" ng-controller="ContributeGallery">

    <div class="row">
      <div class="span8">
        <div class="oppia-gallery-frame">
          <span class="pull-right">
            <button ng-if="!areAllBetaExplorationsShown" ng-click="showBetaExplorations()">
              Include more beta explorations
            </button>
            <button ng-if="areAllBetaExplorationsShown" ng-click="hideBetaExplorations()">
              Show fewer beta explorations
            </button>
          </span>

          <h3 class="oppia-page-title">
            Contribute
          </h3>

          <div class="oppia-gallery" ng-if="displayedCategories">
            <div class="tabbable tabs-left">

              <div class="oppia-gallery-menu">
                <div class="oppia-gallery-menu-title">
                  <strong>Categories</strong>
                </div>
                <ul class="nav nav-pills nav-stacked" id="navTabs">
                  <li ng-repeat="(category, explorations) in displayedCategories"
                      ng-class="{active: $index == 0}">
                    <a data-toggle="tab" href="#<[category|spacesToUnderscores]>">
                      <[category]>
                    </a>
                  </li>
                </ul>
              </div>

              <div class="tab-content oppia-gallery-tiles-container">
                <div ng-repeat="(category, explorations) in displayedCategories" class="tab-pane" ng-class="{active: $index == 0}" id="<[category|spacesToUnderscores]>">
                  <div class="container-fluid">
                    <div class="row-fluid">

                      <div ng-repeat="exploration in explorations" class="oppia-gallery-tile">

                        <div class="oppia-gallery-tile-top">
                          <a href="/explore/<[exploration.id]>" class="oppia-gallery-tile-anchor">
                            <div class="oppia-gallery-tile-description">
                              <span class="oppia-gallery-tile-title"><[exploration.title]></span>
                              <span class="oppia-gallery-tile-play">
                                <i class="icon-play-circle"></i>
                              </span>
                            </div>
                          </a>
                        </div>

                        <div class="oppia-gallery-tile-bottom">
                          <div>
                            <span ng-if="exploration.can_edit">
                              <a href="/create/<[exploration.id]>"><i class="icon-pencil" title="Edit this exploration"></i><span class="oppia-small-font">Edit</span></a>
                            </span>
                            <span ng-if="exploration.can_edit && exploration.can_clone">
                             |
                            </span>
                            <span ng-if="exploration.can_clone">
                              <a href="" ng-click="cloneExploration(exploration.id)">
                                <i class="icon-share oppia-icon" title="Copy this exploration">
                                </i>
                                <span class="oppia-small-font">Copy</span>
                              </a>
                              <img class="oppia-help" src="/images/help.png"
                                   tooltip="Make a private copy of an exploration."
                                   tooltip-placement="top">
                            </span>

                            <span ng-if="exploration.is_cloned" class="label label-info pull-right">
                              Cloned
                            </span>
                            <span ng-if="exploration.is_public" class="label label-info pull-right" style="opacity: 0.5">
                              Beta
                            </span>
                            <span ng-if="exploration.is_private && !exploration.is_cloned" class="label label-info pull-right">
                              Private
                            </span>
                          </div>
                        </div>

                      </div>

                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>

          <br>
          <br>

          <div>
            <a class="btn btn-large" ng-click="showCreateExplorationModal(categoryList)">
              Create New Exploration
            </a>

            {% if allow_yaml_file_upload %}
              <a class="btn btn-large" ng-click="showUploadExplorationModal(categoryList)">
                Upload Existing Exploration
              </a>
            {% endif %}
          </div>

          <script type="text/ng-template" id="modals/galleryCreateNew">
            <div class="modal-header">
              <h3>
                Add New Exploration
              </h3>
            </div>

            <div class="modal-body">
              <div>
                <em>
                  To create a new exploration, enter its title, as well as the category it should fall under in the Gallery (e.g. languages, music).
                </em>
              </div>

              <div>
                Title: <input type="text" ng-model="newExplorationTitle" name="newExplorationTitle" autofocus required>
              </div>

              <div>
                Category:
                <select2-dropdown item="newExplorationCategory" choices="categoryList" placeholder="Select a category, or enter a new one" new-choice-regex="^[A-Z a-z]+$" width="300px">
                </select2-dropdown>
              </div>
            </div>

            <div class="modal-footer">
              <button class="btn" ng-click="create(newExplorationTitle, newExplorationCategory)" ng-disabled="!newExplorationTitle || !newExplorationCategory">Save</button>
              <button class="btn" ng-click="cancel()">Close</button>
            </div>
          </script>

          <script type="text/ng-template" id="modals/galleryUpload">
            <div class="modal-header">
              <h3>
                Upload New Exploration
              </h3>
            </div>

            <div class="modal-body">
              <em>
                This form allows you to upload the YAML file corresponding to an exploration. Currently, you will need to upload any associated image files separately in the relevant states.
              </em>

              <div>
                Title: <input type="text" ng-model="newExplorationTitle" name="newExplorationTitle" autofocus required>
              </div>

              <div>
                Category:
                <select2-dropdown item="newExplorationCategory" choices="categoryList" placeholder="Select a category, or enter a new one" new-choice-regex="^[A-Z a-z]+$" width="300px">
                </select2-dropdown>
              </div>

              <div>
                Upload YAML file:
                <input id="newFileInput" type="file">
              </div>
            </div>

            <div class="modal-footer">
              <button class="btn"
                      ng-click="upload(newExplorationTitle, newExplorationCategory)"
                      ng-disabled="!newExplorationTitle || !newExplorationCategory">Save</button>
              <button class="btn" ng-click="cancel()">Close</button>
            </div>
          </script>
        </div>
      </div>

      {% if announcement %}
        <div class="span4">
          <div class="oppia-contribute-gallery-announcement">
            {{ announcement }}
          </div>
        </div>
      {% endif %}
    </div>
  </div>
{% endblock %}

{% block footer_js %}
  {{ super() }}
  <script>
    {{ include_js_file('galleries/ContributeGallery.js') }}
  </script>
  {{ widget_js_directives }}
{% endblock footer_js %}
